<!DOCTYPE html>
<html style="height:100%">

  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>
      if (typeof module === 'object') {
        window.jQuery = window.$ = module.exports;
      };
    </script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <script id="temp-userinfo" type="text/template">

      <div class="card text-white bg-primary mb-1">
        <div class="card-header">用户信息</div>
        <div class="card-body">

          <table class="table table-hover">

            <tbody>
              <tr>
                <td>登录名</td>
                <td>
                  {{if loginName}}{{loginName}}
                  {{/if}}
                </td>
              </tr>
              <tr>
                <td>手机号</td>
                <td>
                  {{if loginMobile}}{{loginMobile}}
                  {{/if}}
                </td>
              </tr>
              <tr>
                <td>姓名</td>
                <td>
                  {{if realName}}{{realName}}
                  {{/if}}
                </td>
              </tr>
            </tbody>

          </table>
        </div>
      </div>
    </script>
    <script id="temp-cardinfo" type="text/template">

      <div class="card mb-1">
        <div class="card-header">收款码</div>
        <img class="card-img-top" src="{{if qrcode}}{{qrcode}}{{/if}}">

      </div>
      {{each cardList as card}}
      <div class="card  text-white mb-1" style=" background-color: #{{card.color}} !important">
        <div class="card-body">
          <h5 class="card-title">{{card.bank}}
            <span class="badge badge-dark">{{card.cardType}}</span>

            {{if card.canPay}}
              <span class="badge badge-success float-right">可支付</span>
            {{else}}
              <span class="badge badge-danger float-right">不可支付</span>{{/if}}
          </h5>
          <p class="card-text">{{card.pan}}</p>
        </div>

      </div>
    {{/each}}
  </script>
  <script id="temp-sms" type="text/template">
    <div class="modal fade" id="smsDlg-{{user}}" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">输入手机验证码</h5>
          </div>
          <form>
            <div class="modal-body">

              <div class="form-group">
                <label for="name" class="col-form-label">手机号:</label>
                <input type="text" class="form-control" id="name" value="{{user}}" disabled="disabled">
              </div>
              <div class="form-group">
                <label for="sms" class="col-form-label">验证码:</label>
                <input type="number" class="form-control" id="sms" name="sms">
                <small class="form-text text-muted msg"></small>
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary retrysms" disabled="disabled">重发短信</button>
              <button type="button" class="verify btn btn-primary">验证</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </script>
  <script id="temp-order" type="text/template">

    <tr >
      <th>{{orderId}}</th>
      <td>{{amount}}&nbsp;{{currency}}</td>
      <td>{{time}}</td>
      <td>{{reciveCard}}</td>
      <td>{{payInfo}}</td>
      <td>{{desc}}</td>
    </tr>

  </script>
  <style>
    .err {
      color: red !important;
    }
    body {
      font-size: 12px;
    }
    .template {
      display: none;
    }
    .tab-pane.active {
      flex: 1;
      display: flex;
      flex-direction: row;
    }
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track-piece {
      background-color: #CCCCCC;
      -webkit-border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:vertical {
      height: 5px;
      background-color: #999999;
      -webkit-border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:horizontal {
      width: 5px;
      background-color: #CCCCCC;
      -webkit-border-radius: 6px;
    }
    .toolbar {
      border-top: 1px solid #ccc;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 40px;
      text-align: right;
      background: #EEE;
      padding: 4px;
    }
    .msg {
      padding-left: 15px;
      color: green;
      float: left;
      height: 30px;

      line-height: 30px;
    }

    .orderlist {
      border-left: 1px solid #ccc;
    }
    .retryCard {
      display: none;
    }
  </style>
</head>

<body style="height:100%">

  <div class="container-fluid p-0" style="display:-webkit-flex;display:flex;flex-direction: column;height:100%">
    <div style="flex:none;overflow:auto;">
      <ul class="nav nav-tabs" id="accTabs" role="tablist">
        <!-- <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> </li> -->
        <li class="nav-item template">
          <a class="nav-link" id="tab-[[$user]]" data-toggle="tab" href="#panel-[[$user]]" role="tab" aria-controls="panel-[[$user]]" aria-selected="false">[[$user]]<span class="badge badge-danger"></span></a>
        </li>

      </ul>

    </div>

    <div class="tab-content" id="accPanels" style="flex: 1;overflow-y: auto;display: flex;flex-direction: row;">
      <!--<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> -->
      <div class="tab-pane fade template" style="position: relative;" id="panel-[[$user]]" role="tabpanel" aria-labelledby="tab-[[$user]]">

        <div class="info" style="width:300px;flex:none;height:100%;overflow-y:auto;padding:5px; padding-bottom:40px">

          <div class="userinfo"></div>
          <div class="cardinfo"></div>
        </div>
        <div class="orderlist" style="flex:1;overflow-y:auto;padding:5px; padding-bottom:40px">
          <table class="table">
            <thead class="thead-dark">
              <tr>
                <th scope="col">订单号</th>
                <th scope="col" style="width:200px">数量</th>
                <th scope="col" style="width:200px">时间</th>
                <th scope="col" style="width:300px">收款卡</th>
                <th scope="col" style="width:300px">对方</th>
                <th scope="col" style="width:300px">备注</th>
              </tr>
            </thead>
            <tbody id="orders"></tbody>
          </table>

        </div>
        <div class="toolbar">
          <button type="button " class="btn btn-danger btn-sm deleteBtn">删除账号</button>
          <button type="button " class="btn btn-primary btn-sm retryCard">重新获取银行卡</button>

          <div class="msg">等待登录中</div>
        </div>
      </div>

    </div>
  </div>
</div>
</div>

<!---->
<div class="modal fade" id="importAcc" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">添加账号</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <form>
      <div class="modal-body">

        <div class="form-group">
          <label for="name" class="col-form-label">手机号:</label>
          <input type="text" class="form-control" id="name" name="name">
        </div>
        <div class="form-group">
          <label for="pwd" class="col-form-label">密码:</label>
          <input type="text" class="form-control" id="pwd" name="pwd">
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary">导入</button>
      </div>
    </form>
  </div>
</div>
</div>
<div id="modelContainer"></div>

</body>
<script>

require("./inject.js")
</script>

</html>